<template>
  <div class="app-container">
    <!-- Add search form -->
    <el-form :inline="true" :model="queryParam" class="search-form" @submit.native.prevent>
      <el-form-item>
        <el-input
          v-model="queryParam.title"
          placeholder="职位名称"
          clearable
          @clear="search"
          @keyup.enter.native="search"
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="queryParam.companyName"
          placeholder="公司名称"
          clearable
          @clear="search"
          @keyup.enter.native="search"
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-select
          v-model="queryParam.mbtiType"
          placeholder="MBTI类型"
          clearable
          @clear="search"
        >
          <el-option
            v-for="item in mbtiOptions"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search" class="search-button" style="margin-left: 60px;">搜索</el-button>
        <el-button @click="clearSearch" class="clear-button">清空</el-button>
      </el-form-item>
    </el-form>

    <div v-loading="listLoading" class="job-list">
      <div class="job-list-container">
        <el-card v-for="item in tableData" :key="item.jobId" class="job-card" shadow="hover">
          <!-- Top row -->
          <div class="job-header">
            <div class="left-section">
              <span class="job-title" @click="showJobDetail(item)">{{item.title}}</span>
              <el-tag v-if="item.status === 1" size="mini" type="success" class="status-tag">在线</el-tag>
            </div>
            <span class="salary">{{item.wages}}</span>
          </div>

          <!-- Tags row -->
          <div class="job-tags">
            <!-- <span >新乡</span> -->
            <span class="tag">经验不限</span>
            <span class="tag">学历不限</span>
            <!-- <span class="tag">手游</span> -->
            <span class="tag">人数：{{ item.count }}人</span>
            <template v-if="item.mbtiList && item.mbtiList.length">
              <br>
              <span class="tag mbti-tag" v-for="mbti in item.mbtiList" :key="mbti.id">
                {{mbti.mbtiType}}
              </span>
            </template>
          </div>

          <!-- Company row -->
          <div class="company-info">
            <div class="company-left">
              <i class="el-icon-office-building"></i>
              <span class="company-name" @click.stop="showCompanyDetail(item.companyId)">{{item.companyName}}</span>
            </div>
            <!-- <div class="company-right">
              <span class="industry">互联网</span>
              <span class="financing">不需要融资</span>
            </div> -->
          </div>
        </el-card>
      </div>
    </div>

    <div class="pagination-container">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParam.pageIndex"
        :limit.sync="queryParam.pageSize"
        @pagination="search"
      />
    </div>

    <!-- Add job detail dialog -->
    <el-dialog
      :title="currentJob.title"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
      custom-class="job-detail-dialog"
    >
      <div class="job-detail">
        <div class="detail-header">
          <div class="header-main">
            <div class="detail-salary">{{currentJob.wages}}</div>
            <el-tag size="medium" type="success" effect="plain" class="detail-status" v-if="currentJob.status === 1">
              招聘中
            </el-tag>
          </div>
          <div class="header-sub">
            <i class="el-icon-user"></i>
            <span>招聘人数：{{currentJob.count}}人</span>
          </div>
        </div>

        <div class="detail-section" v-if="currentJob.mbtiList && currentJob.mbtiList.length">
          <div class="section-header">
            <i class="el-icon-medal"></i>
            <span>性格要求</span>
          </div>
          <div class="mbti-tags">
            <el-tag
              v-for="mbti in currentJob.mbtiList"
              :key="mbti.id"
              type="info"
              effect="plain"
              class="mbti-tag"
            >
              {{mbti.mbtiType}}
            </el-tag>
          </div>
        </div>

        <div class="detail-section">
          <div class="section-header">
            <i class="el-icon-document"></i>
            <span>职位描述</span>
          </div>
          <div class="section-content">{{currentJob.description}}</div>
        </div>

        <div class="detail-section">
          <div class="section-header">
            <i class="el-icon-s-check"></i>
            <span>职位要求</span>
          </div>
          <div class="section-content">{{currentJob.requirements}}</div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button
          type="primary"
          @click="applyJob"
          :loading="applyLoading"
        >
          申请职位
        </el-button>
      </span>
    </el-dialog>

    <!-- Add company detail dialog -->
    <el-dialog
      :title="currentCompany.name || '公司详情'"
      :visible.sync="companyDialogVisible"
      width="600px"
      :close-on-click-modal="false"
      custom-class="company-detail-dialog"
    >
      <div v-loading="companyLoading" class="company-detail">
        <div class="detail-header">
          <div class="company-logo">
            <i class="el-icon-office-building"></i>
          </div>
          <div class="company-basic">
            <h3>{{currentCompany.name}}</h3>
            <div class="company-tags">
              <el-tag size="small" effect="plain">互联网</el-tag>
              <el-tag size="small" effect="plain" type="success">已认证</el-tag>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <div class="section-header">
            <i class="el-icon-info"></i>
            <span>公司简介</span>
          </div>
          <div class="section-content">{{currentCompany.introduce || '暂无简介'}}</div>
        </div>

        <div class="detail-section">
          <div class="section-header">
            <i class="el-icon-location"></i>
            <span>公司地址</span>
          </div>
          <div class="section-content">{{currentCompany.address || '暂无地址信息'}}</div>
        </div>

        <div class="detail-section">
          <div class="section-header">
            <i class="el-icon-phone"></i>
            <span>联系方式</span>
          </div>
          <div class="section-content">
            <p><label>电话：</label>{{currentCompany.phone || '暂无'}}</p>
            <p><label>官网：</label>{{currentCompany.url || '暂无'}}</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.job-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.job-list-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.job-card {
  flex: 0 0 calc(20% - 10px);
  margin: 5px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-color: #b0bec5;
  }
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;

  .left-section {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .job-title {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
    cursor: pointer;

    &:hover {
      color: #409EFF;
    }
  }

  .status-tag {
    background: #f0f9eb;
    color: #67c23a;
    border: none;
    padding: 0 4px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    border-radius: 4px;
  }

  .salary {
    color: #ff4d4f;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
  }
}

.job-tags {
  margin: 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  .tag {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    height: 24px;
    font-size: 12px;
    color: #666;
    background: #f7f8fa;
    border-radius: 4px;
    white-space: nowrap;
  }

  .mbti-tag {
    color: #1890ff;
    background: #e6f7ff;
  }
}

.company-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  color: #666;
  font-size: 12px;

  .company-left {
    display: flex;
    align-items: center;
    gap: 4px;

    i {
      font-size: 14px;
      color: #909399;
    }

    .company-name {
      color: #606266;
      font-weight: 500;
    }
  }

  .company-right {
    display: flex;
    gap: 8px;

    span {
      color: #909399;
      font-size: 12px;
    }

    .industry::after {
      content: '·';
      margin-left: 8px;
      color: #dcdfe6;
    }
  }
}

.job-detail-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 0;
  }

  :deep(.el-dialog__header) {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
  }

  :deep(.el-dialog__footer) {
    padding: 20px;
    border-top: 1px solid #ebeef5;
  }
}

.job-detail {
  padding: 0 20px;

  .detail-header {
    padding: 20px;
    background: #fafafa;
    border-radius: 8px;
    margin-bottom: 24px;

    .header-main {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .detail-salary {
      font-size: 24px;
      font-weight: 600;
      color: #ff4d4f;
    }

    .detail-status {
      height: 24px;
      line-height: 22px;
      padding: 0 12px;
    }

    .header-sub {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #606266;
      font-size: 14px;

      i {
        color: #909399;
      }
    }
  }

  .detail-section {
    padding: 20px 0;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .section-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;

      i {
        font-size: 18px;
        color: #409EFF;
      }

      span {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
      }
    }

    .section-content {
      font-size: 14px;
      line-height: 1.8;
      color: #606266;
      white-space: pre-wrap;
      padding: 0 26px;
    }

    .mbti-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 0 26px;

      .mbti-tag {
        padding: 0 16px;
        height: 32px;
        line-height: 30px;
        font-size: 14px;
      }
    }
  }
}

.company-detail {
  padding: 0 20px;

  .detail-header {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: #fafafa;
    border-radius: 8px;
    margin-bottom: 24px;

    .company-logo {
      width: 64px;
      height: 64px;
      background: #fff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ebeef5;

      i {
        font-size: 32px;
        color: #409EFF;
      }
    }

    .company-basic {
      flex: 1;

      h3 {
        margin: 0 0 12px;
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }

      .company-tags {
        display: flex;
        gap: 8px;
      }
    }
  }

  .detail-section {
    padding: 20px 0;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .section-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;

      i {
        font-size: 18px;
        color: #409EFF;
      }

      span {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
      }
    }

    .section-content {
      font-size: 14px;
      line-height: 1.8;
      color: #606266;
      padding: 0 26px;

      p {
        margin: 8px 0;
      }

      label {
        display: inline-block;
        width: 60px;
        color: #909399;
      }
    }
  }
}

.company-detail-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 0;
  }

  :deep(.el-dialog__header) {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
  }
}

.company-detail {
  min-height: 200px;
}

.search-form {
  background: #fff;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 4px;

  :deep(.el-form-item) {
    margin-bottom: 0;
    margin-right: 16px;

    .el-input {
      width: 200px;
    }

    .el-select {
      width: 140px;
    }
  }
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  position: relative;
}

.search-button {
  background-color: #409EFF;
  color: white;
  transition: background-color 0.3s;

  &:hover {
    background-color: #66b1ff;
  }
}

.clear-button {
  background-color: #f56c6c;
  color: white;
  transition: background-color 0.3s;

  &:hover {
    background-color: #ff7f7f;
  }
}
</style>

<script>
import subjectApi from '@/api/company'
import userApi from '@/api/user'
import Pagination from '@/components/Pagination'
import { mapGetters, mapState } from 'vuex'

export default {
  components: { Pagination },
  data () {
    return {
      queryParam: {
        title: '',
        companyName: '',
        mbtiType: '',
        pageIndex: 1,
        pageSize: 10
      },
      listLoading: true,
      tableData: [],
      total: 0,
      dialogVisible: false,
      currentJob: {},
      companyDialogVisible: false,
      currentCompany: {},
      companyLoading: false,
      applyLoading: false,
      mbtiOptions: [
        'ISTJ', 'ISFJ', 'INFJ', 'INTJ',
        'ISTP', 'ISFP', 'INFP', 'INTP',
        'ESTP', 'ESFP', 'ENFP', 'ENTP',
        'ESTJ', 'ESFJ', 'ENFJ', 'ENTJ'
      ],
      userInfo: {}
    }
  },
  computed: {
    ...mapGetters(['userId']),
  },
  created () {
    this.checkUserProfile()
  },
  methods: {
    checkUserProfile() {
      if (!this.userInfo) {
        this.$message.error('请先登录')
        this.$router.push('/login')
        return
      }
      const that = this

      userApi.getCurrentUser().then(re => {
        that.userInfo = re.response

        const hasMbti = this.userInfo.mbti && this.userInfo.mbti.trim() !== ''
        const hasBio = this.userInfo.biographicalNotes && this.userInfo.biographicalNotes.trim() !== ''

        if (!hasMbti || !hasBio) {
          this.$message.error('请先完善个人信息，包括MBTI类型和个人简介')
          this.$router.push('/index')
          return
        }

        this.queryParam.mbtiType = this.userInfo.mbti
        this.search()
      }).catch(() => {
        this.$message.error('获取用户信息失败')
        this.$router.push('/login')
      })
    },
    search () {
      this.listLoading = true

      const params = {
        title: this.queryParam.title || null,
        companyName: this.queryParam.companyName || null,
        mbtiType: this.queryParam.mbtiType || null,
        pageNum: this.queryParam.pageIndex,
        pageSize: this.queryParam.pageSize
      }

      subjectApi.pageList(params).then(data => {
        const re = data.response
        this.tableData = re.list
        this.total = re.total
        this.listLoading = false
      }).catch(() => {
        this.$message.error('数据加载失败')
        this.listLoading = false
      })
    },
    showJobDetail (job) {
      this.currentJob = job
      this.dialogVisible = true
    },
    applyJob () {
      if (!this.userInfo) {
        this.$message.error('请先登录')
        return
      }

      this.applyLoading = true
      const data = {
        userId: this.userInfo.id,
        jobId: this.currentJob.jobId,
        companyId: this.currentJob.companyId
      }

      subjectApi.applyJob(data)
        .then(res => {
          if (res.code === 1) {
            this.$message.success('申请成功！')
            this.dialogVisible = false
          } else {
            this.$message.error(res.message || '申请失败')
          }
        })
        .catch(() => {
          this.$message.error('申请失败')
        })
        .finally(() => {
          this.applyLoading = false
        })
    },
    showCompanyDetail (companyId) {
      this.companyDialogVisible = true
      this.companyLoading = true
      this.currentCompany = {}

      subjectApi.select(companyId)
        .then(data => {
          if (data.code === 1) {
            this.currentCompany = data.response
          } else {
            this.$message.error(data.message || '获取公司信息失败')
          }
        })
        .catch(() => {
          this.$message.error('获取公司信息失败')
        })
        .finally(() => {
          this.companyLoading = false
        })
    },
    clearSearch() {
      this.queryParam.title = ''
      this.queryParam.companyName = ''
      this.queryParam.mbtiType = ''
      this.search()
    }
  }
}
</script>
